import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';

// 定义导航参数类型
type RootStackParamList = {
  Home: undefined;
  Details: undefined;
};

type HomeScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  'Home'
>;

// 1. 创建页面组件
// 首页组件
function HomeScreen({navigation}: {navigation: HomeScreenNavigationProp}) {
  // navigation 是 Stack.Screen给传递的
  // const nav = useNavigation();
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate('Details')}>
        <Text style={styles.link}>Home Screen (点击跳转到详情页)</Text>
      </TouchableOpacity>
    </View>
  );
}

// 详情页组件
function DetailsScreen() {
  return (
    <View style={styles.container}>
      <Text>HomeDetailsScreen Scre1en</Text>
    </View>
  );
}

// 2. 创建堆栈导航器
const Stack = createNativeStackNavigator<RootStackParamList>();

// 3. 配置路由结构
function RootStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{headerShown: false}}>
      {/* 注册路由 - 首页 */}
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 注册路由 - 详情页 */}
      <Stack.Screen name="Details" component={DetailsScreen} />
      {/* 来新增我们的页面！！  */}
    </Stack.Navigator>
  );
}

// 4. 应用入口组件
export default function App() {
  return (
    // 包裹在NavigationContainer中以启用导航功能
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

// 5. 定义样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  link: {
    color: 'blue',
    fontSize: 18,
    textDecorationLine: 'underline',
  },
});
